<template>
  <div class="houseRepair">
    <el-tabs type="border-card">
      <el-tab-pane label="用户管理">
        <div class="input-container">
          <el-input
            v-model="pagination.homename"
            placeholder="维修房主"
            class="short-input"
          ></el-input>
          <el-input
            v-model="pagination.resultstatus"
            placeholder="维修状态"
            class="short-input"
          ></el-input>
          <el-date-picker
            v-model="pagination.startDate"
            type="date"
            placeholder="选择开始日期"
            class="date-picker"
          ></el-date-picker>
          <el-date-picker
            v-model="pagination.endDate"
            type="date"
            placeholder="选择结束日期"
            class="date-picker"
          ></el-date-picker>
          <el-button type="primary" @click="getTableData">查询维修</el-button>
          <el-button type="danger" @click="handleReset">重置</el-button>
        </div>
        <el-table
          :data="tableData"
          style="margin-top: 20px; border: 1px solid #dcdfe6"
          border
        >
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            prop="homename"
            label="发布人员"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="housename"
            label="房屋信息"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="repaircontent"
            label="维修内容"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="createtime"
            label="发布时间"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="resultcontent"
            label="处理结果"
            width="200"
          ></el-table-column>
          <el-table-column prop="resultstatus" label="处理状态" width="200">
            <template slot-scope="scope">
              <span v-if="scope.row.resultstatus === 2">待处理</span>
              <span v-else>已处理</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="viewDetails(scope.row)">查看</el-button>
              <el-button type="danger" @click="deleteEntry(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 表单形式的模态框 -->
        <el-dialog :visible.sync="dialogVisible" title="房屋信息详情">
          <el-form :model="selectedRow" label-width="100px">
            <el-form-item label="发布人员">
              <el-input
                v-model="selectedRow.homename"
                placeholder="发布人员"
              ></el-input>
            </el-form-item>
            <el-form-item label="房屋信息">
              <el-input
                v-model="selectedRow.housename"
                placeholder="房屋信息"
              ></el-input>
            </el-form-item>
            <el-form-item label="维修内容">
              <el-input
                v-model="selectedRow.repaircontent"
                placeholder="维修内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="处理结果">
              <el-input
                v-model="selectedRow.resultcontent"
                placeholder="处理结果"
              ></el-input>
            </el-form-item>
            <el-form-item label="处理状态">
              <el-select
                v-model="selectedRow.resultstatus"
                placeholder="处理状态"
              >
                <el-option label="待处理" :value="2"></el-option>
                <el-option label="已处理" :value="1"></el-option>
              </el-select>
            </el-form-item>
        
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: "",
      tableData: [],
      selectedRow: {},
      dialogVisible: false,
      pagination: {
        repairtype: 2,
        homename: "",
        resultstatus: "",
        startDate: "",
        endDate: "",
        currPage: 0,
        pageNum: 10,
      },
    };
  },
  methods: {
    handleReset() {
      this.pagination.homename = "";
      this.pagination.resultstatus = "";
      this.pagination.startDate = "";
      this.pagination.endDate = "";
      this.$message.info("已重置输入内容");
      this.getTableData(); // Fetch data after resetting
    },
    async getTableData() {
      try {
        const { data: res } = await this.axios.get("poster/getRepairData?", {
          params: this.pagination,
        });
        console.log(res);
        this.tableData = res.data;
        this.total = res.total;
      } catch (error) {
        this.handleError("获取数据失败", error);
      }
    },
    viewDetails(row) {
      this.selectedRow = { ...row }; // Set selected row data for dialog
      this.dialogVisible = true; // Open dialog
    },
    deleteEntry(row) {
      this.$confirm(`确定删除: ${row.housename} 吗?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message.success(`删除成功: ${row.housename}`);
          // 这里可以添加删除的业务逻辑
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
  },
  created() {
    this.getTableData();
  },
};
</script>

<style lang="scss" scoped>
.houseRepair {
  margin: 1.3% 1%;
  padding: 20px;
  background-color: #fff;
  height: calc(100% - 46px);
}

.input-container {
  display: flex;
  align-items: center;
  gap: 10px; /* 设置输入框和按钮之间的间距 */
}

.short-input {
  width: 300px; /* 设置输入框的固定宽度 */
}

.date-picker {
  width: 150px; /* 设置日期选择器的固定宽度 */
}

.el-table {
  width: 100%; /* 表格宽度占满容器 */
  border: 1px solid #dcdfe6; /* 表格边框 */
}

.el-table th,
.el-table td {
  border: 1px solid #dcdfe6; /* 表格单元格边框 */
}
</style>